<template>
  <div class="logo">
    <router-link :to="{path:'/'}">
      <img :src="getLogo()" alt="logo">
      <h1 v-if="showTitle">{{ systemSimpleName }}</h1>
    </router-link>
  </div>
</template>

<script>

  import {isURL} from '../../utils/validate';
    import { mixinApp } from '../../mixin/store-mixin';

  export default {
    name: 'Logo',
    mixins:[mixinApp],
    props: {
      showTitle: {
        type: Boolean,
        default: true,
        required: false
      }
    },
    data(){
      return {

      }
    },
    methods:{
       getLogo(){
        let logo = this.systemLogo;
        console.log(logo)
        if(!logo){
          return require('../../assets/logo.png');
        }
        if(isURL(logo)){
          return logo;
        }
        return logo;
      }
    }
  }
</script>
<style lang="scss" scoped>
  /*缩小首页布 局顶部的高度*/
  $height: 59px;

  .sider {
    box-shadow: none !important;
    .logo {
      height: $height !important;
      line-height: $height !important;
      box-shadow: none !important;
      transition: background 300ms;

      a {
        color: white;
        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }

    &.light .logo {
      background-color: #1890ff;
    }
  }
</style>
